body {
    background-color: #5d7699 !important;
    margin: 0 !important; /* Az extra margin eltávolítása */
    padding: 0; /* Biztosítja, hogy a body ne tartalmazzon extra teret */
}

/* Menü stílusok */
#menu {
    display: flex;
    flex-direction: row; /* Az elemek vízszintesen, egy sorban helyezkedjenek el */
    justify-content: center; /* Az elemek középre igazítása vízszintesen */
    align-items: center; /* Az elemek középre igazítása függőlegesen */
    height: 100px; /* Meghatározott magasság */
    background-color: #34495e; /* Háttérszín */
    box-shadow: 1px 1px 7px rgb(48, 48, 48); /* Árnyék */
    padding: 0 20px; /* Oldalsó margók */
    gap: 20px; /* Távolság az elemek között */
    box-sizing: border-box; /* Padding és szélesség kezelése */
}

#menu ul {
    list-style: none; /* A listaszimbólumok eltávolítása */
    padding: 0;
    margin: 0;
    display: flex; /* Az elemek vízszintes elrendezése */
    gap: 20px; /* Távolság a menüpontok között */
    align-items: center; /* Függőleges középre igazítás */
}

#menu ul li {
    display: flex;
    align-items: center; /* Minden elem függőleges középre igazítása */
}

#menu ul li a {
    display: flex;
    align-items: center; /* Vertikális középre igazítás */
    justify-content: center; /* Horizontális középre igazítás */
    padding: 10px 15px; /* Kényelmes kattintási felület */
    text-decoration: none; /* Aláhúzás eltávolítása */
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #F9FAFA; /* Fehér szöveg */
    background-color: transparent; /* Átlátszó háttér */
    border: none;
    transition: background-color 0.3s ease; /* Simább hover animáció */
}

#menu ul li a:hover {
    background-color: #7E95B4; /* Hover háttérszín */
}

/* Dropdown menü stílusok */
#menu ul li select {
    font-size: 16px;
    padding: 10px; /* Kényelmes kattintási felület */
    border: 1px solid #ccc; /* Szegély */
    border-radius: 4px; /* Lekerekített sarkok */
    margin: 0;
    text-align: center; /* Szöveg középre igazítása */
    background-color: #fff; /* Fehér háttér */
    color: #333; /* Sötét szöveg */
    appearance: none; /* Böngésző alapértelmezett stílusának eltávolítása */
    box-sizing: border-box;
}

/* Általános stílus az űrlaphoz */
form {
    margin: 0 auto; /* Középre helyezi a formot */
    text-align: center; /* A formon belüli tartalmat középre igazítja */
    width: auto; /* Form méretének automatikus beállítása */
}

/* Input gombok és legördülő menük */
input[type=submit], select {
    width: auto; /* Csak a tartalomhoz igazodik */
    padding: 12px 20px; /* Kényelmes méretezés */
    margin: 10px 0; /* Távolság az elemek között */
    border: 1px solid #ccc; /* Szegély */
    border-radius: 4px; /* Lekerekített sarkok */
    box-sizing: border-box; /* Szélesség tartalmazza a paddinget */
}

/* Szülő elem stílusok a középre igazításhoz */
#torzs {
    display: flex; /* Flexbox használata */
    justify-content: center; /* Vízszintes középre igazítás */
    align-items: center; /* Függőleges középre igazítás */
    flex-direction: column; /* Elemek egymás alatt */
    min-height: 100vh; /* Teljes képernyő magasság */
    background-color: #f2f2f2; /* Háttérszín */
    padding: 20px; /* Extra belső margó */
    box-sizing: border-box;
}

/* Formázott form */
.centered-form {
    display: flex;
    flex-direction: column; /* Elemek egymás alatt */
    align-items: center; /* Középre igazítás vízszintesen */
    width: 30%; /* Form szélessége */
    max-width: 400px; /* Maximális szélesség */
    background: #ffffff; /* Fehér háttér */
    padding: 20px; /* Belső margók */
    border: 1px solid #ccc; /* Szegély */
    border-radius: 8px; /* Lekerekített sarkok */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Árnyék */
    box-sizing: border-box; /* Szélesség számítása */
}

/* Gombok és legördülő menük stílusa */
.centered-form input[type="submit"],
.centered-form select {
    width: 100%; /* Szülő szélességéhez igazítás */
    padding: 12px 20px; /* Belső margók */
    margin: 10px 0; /* Külső margók */
    border: 1px solid #ccc; /* Szegély */
    border-radius: 4px; /* Lekerekített sarkok */
    font-size: 16px; /* Betűméret */
    box-sizing: border-box; /* Szélesség számítása */
}

/* Hover állapot a gomboknál */
.centered-form input[type="submit"]:hover {
    background-color: #4CAF50; /* Hover háttérszín */
    color: white; /* Hover betűszín */
    cursor: pointer; /* Kéz ikon hovernél */
    transition: background-color 0.3s ease; /* Simább hover animáció */
}

/* Reszponzív tervezés */
@media (max-width: 768px) {
    #menu {
        flex-direction: column; /* Kis képernyőn az elemek egymás alá kerülnek */
        height: auto; /* Automatikus magasság */
        padding: 10px; /* Szűkebb margó */
    }

    #menu ul {
        flex-direction: column; /* A menüpontok egymás alá rendezése */
        gap: 10px; /* Távolság az elemek között */
    }
}